<template>
    <div>
      <el-drawer :visible.sync="drawer" direction="rtl" size="45%" :with-header="false">
        <div class="drawer_box">
          <div class="drawer_t">
            <div class="drawer_t_l">
              <img class="drawer_t_l_img"
                src="/static/skin/herodoo/main/platform/home/img/quanyishaixuan.png" alt="">
              退款申请
            </div>
            <img class="drawer_t_r" src="/static/skin/herodoo/main/platform/home/img/guanbi.png" alt=""
              @click="drawer = false">
          </div>
          <div class="scrollbar_box">
          <!-- 退款记录 -->
          <div class="onRefundRecord_box" v-if="RefundType != '退款权益'">
            <el-timeline reverse = true>
              <el-timeline-item
                v-for="(activity, index) in activities"
                :key="index"
                color="#FF8755">
                <div class="RecordMsg">
                  <span>{{ activity.type }}</span>
                  {{ activity.content }}
                </div>
                <div class="timeName">
                  {{ activity.timestamp }} {{ activity.name }}
                </div>
              </el-timeline-item>
            </el-timeline>
          </div>
          <div class="created_content">
            <div class="created_content_list">
              <!-- 退款驳回状态展示 -->
              <div class="again">重新申请退款:</div>
              <div class="again">申请退款内容:</div>
              <!-- 基础信息 -->
              <div class="block_box" v-for="(item,index) in inputValue" :key="index">
                <div class="list_box">
                    <div class="left">权益名称:</div>
                    <div class="right">
                    上海之巅观光厅（4A）成人118层观光票一张
                    </div>
                </div>
                <div class="list_box">
                    <div class="left">购买数量:</div>
                    <div class="right">
                     1
                    </div>
                </div>
                <div class="list_box">
                    <div class="left">购买金额(元):</div>
                    <div class="right">
                     180
                    </div>
                </div>
                <div class="list_box">
                    <div class="left">下单时间:</div>
                    <div class="right">
                    2024.03.13 15:00:00
                    </div>
                </div>
                <div class="list_box">
                    <div class="left">申请退款数量:</div>
                    <div class="right">
                        <el-input-number size="mini" v-model="item.quantity"></el-input-number>
                    </div>
                </div>
                <div class="list_box">
                    <div class="left">应退金额:</div>
                    <div class="right">
                    180
                    </div>
                </div>
                <div class="list_box">
                  <div class="left">手续费(元):</div>
                  <div class="right">
                    0
                  </div>
                </div>
                <div class="list_box">
                  <div class="left">申请退款金额:</div>
                  <div class="right" style="display: flex;">
                    <el-input style="width: 30%;" v-model="item.money" placeholder="请输入申请退款金额"></el-input>
                    <div class="prompt">最多可退180.00</div>
                  </div>
                </div>
                <div class="list_box" style="align-items: center;">
                  <div class="left" style="padding-right: .5rem;align-self: flex-start;">请选择售后原因</div>
                  <div class="right">
                    <el-radio v-model="channel" label="1">计划有变,无法按时使用</el-radio>
                    <el-radio v-model="channel" label="2">多拍/拍错/不想要</el-radio>
                    <el-radio v-model="channel" label="3">位置/时间不满意</el-radio>
                    <el-radio v-model="channel" label="4">其他</el-radio>
                  </div>
                </div>
              </div>
              <div class="button_list">
                <button>提交</button>
              </div>
            </div>
          </div>
        </div>
        </div>
      </el-drawer>
    </div>
  </template>
  <script>
  export default {
    name: 'screen_Rights',
    data() {
      return {
        drawer: false,
        radio: '1',
        channel:'1',
        refundType:'1',
        refundTypeArr:[
          {
            id:1,
            skyNumber:'',
            proportion:'',
          }
        ],
        inputValue: [{
          money: '',
          quantity:0
        }],
        RefundType:'Refund',
        activities: [{
          content: '退款已受理，三个工作日内处理完成',
          timestamp: '2018-04-15 15:00:00',
          type:'已处理',
          name:'Adorable'
        }, {
          content: '抱歉，您的退款理由属于个人原因，无法手里退款',
          timestamp: '2018-04-13 15:00:00',
          type:'驳回',
          name:'Adorable'
        }, {
          content: '提交退款申请',
          timestamp: '2018-04-11 15:00:00',
          type:'提交',
          name:'Adorable'
        }]
      };
    },
    mounted() {
    },
    methods: {
      drawerOp(type) {
        this.RefundType = type
        if(this.RefundType == '退款权益'){
          this.inputValue.push({
            money: '',
            quantity:0
          })
        }
        this.drawer = true
      },
    },
  };
  </script>
  <style scoped>
  .again{
    font-size: 1.8rem;
    margin-bottom: 1rem;
  }
  .RecordMsg span{
    font-size: 1.2rem;
    background-color: #F75353;
    color: #fff;
    padding: .2rem .8rem;
    border-radius: .7rem;
  }
  .timeName{
    font-size: 1.4rem;
    color: #949494;
    margin-top: 1rem;
  }
  .scrollbar_box{
    overflow-x: auto;
    height: 85vh;
  }
  .onRefundRecord_box{
    margin-top: 3rem;
    margin-left: 1rem;
  }
  .prompt{
    color: #F78C53;
    margin-left: 1rem;
  }
  .button_list {
    margin-top: 1rem;
    display: flex;
    justify-content: end;
    position: absolute;
    background-color: #ffff;
    bottom: 1rem;
    width: calc(100% - 7rem);
  }
  
  .button_list button {
    border: none;
    height: 4rem;
    width: 12rem;
    border-radius: 1rem;
    margin-left: 1rem;
    color: #ffff;
    background-color: #F78C53;
    cursor: pointer;
  }
  
  .drawer_box {
    padding: 2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  
  .drawer_t {
    display: flex;
    justify-content: space-between;
    width: 100%;
    background-color: #ffff;
    /* border-bottom: 1px solid #0000; */
  }
  
  .drawer_t_l {
    display: flex;
    align-items: center;
    font-size: 1.8rem;
    font-weight: bold;
  }
  
  .drawer_t_l_img {
    width: 2.8rem;
    margin-right: 1rem;
    vertical-align: middle;
  }
  
  .drawer_t_r {
    width: 3rem;
    height: 3rem;
    cursor: pointer;
  }
  
  .created_content {
    /* height: calc(100vh - 14rem); */
    /* height: 100vh; */
    /* margin-top: 5rem; */
    font-size: 1.5rem;
    padding: 0 .5rem;
    overflow: auto;
    box-sizing: border-box;
  }
  
  
  .created_content .created_content_list .block_box {
    box-shadow: inset 0px 0px 4px 0px #E9E9E9;
    background: #FDFDFD;
    border-radius: 1rem;
    padding: 2rem;
    margin-bottom: 2rem;
  }
  
  .created_content .created_content_list .list_box {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }
  
  .created_content .created_content_list .list_box {
    /* height: 3.5rem; */
    line-height: 4rem;
    margin-top: 2rem;
  }
  
  .created_content .created_content_list .list_box .left {
    width: 20%;
    font-size: 1.5rem;
  }
  
  .created_content .created_content_list .list_box .right {
    width: 80%;
  }
  
  >>>.el-input__inner:focus {
    border-color: #F87338;
    outline: 0;
  }
  
  >>>.el-select .el-input.is-focus .el-input__inner {
    border-color: #F87338;
  }
  
  .el-select-dropdown__item.selected {
    color: #F87338 !important;
    font-weight: 700;
  }
  
  >>>.el-radio__input.is-checked+.el-radio__label {
    color: #F87338;
  }
  
  >>>.el-radio__input.is-checked .el-radio__inner {
    border-color: #F87338;
    background: #F87338;
  }
  
  </style>